<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
  defineComponent,
  ref,
  getCurrentInstance,
  reactive,
  toRef,
  computed,
  onMounted,
  onActivated,
  watch,
  onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';


// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import api from '@/http/public.js';
export default defineComponent({
  name: 'BigScreenView',
  components: {
    ViewHead,
  },
  setup() {
    const ViewRef = ref(null);
    const topList = ref([
      { name: '电网计划有功功率', value: '0 ', unit: 'MW' },
      { name: '电网计划无功功率', value: '0 ', unit: 'MVar' },
      { name: '电站实时有功功率', value: '0 ', unit: 'MW' },
      { name: '电站实时无功功率', value: '0 ', unit: 'MVar' },
      { name: '升压站母线电压', value: '0 ', unit: 'kV' },
      { name: '电网频率', value: '0 ', unit: 'HZ' }
    ]);
    const bottomList = ref([
      { name: '多能互补系统电价', value: '321.2' },
      { name: '风电电价', value: '321.2' },
      { name: '光伏电价', value: '321.2' },
      { name: '光热电价', value: '321.2' },
      { name: '电化学储能电价', value: '321.2' },
    ]);
    const centerList = ref([
      { title: '风电站', value: '321.2', list: [{ name: '实时有功功率', value: '44', unit: 'MW' }, { name: '实时无功功率', value: '44', unit: 'MVar' }, { name: '实时功率因数', value: '55' }, { name: '调度有功功率', value: '44', unit: 'MW' }, { name: '调度无功功率', value: '44', unit: 'MVar' },] },
      { title: '光伏电站', value: '321.2', list: [{ name: '实时有功功率', value: '44', unit: 'MW' }, { name: '实时无功功率', value: '44', unit: 'MVar' }, { name: '实时功率因数', value: '55' }, { name: '调度有功功率', value: '44', unit: 'MW' }, { name: '调度无功功率', value: '44', unit: 'MVar' },] },
      { title: '电化学储能模块', value: '321.2', list: [{ name: '实时有功功率', value: '44', unit: 'MW' }, { name: '实时无功功率', value: '44', unit: 'MVar' }, { name: '实时功率因数', value: '55' }, { name: '调度有功功率', value: '44', unit: 'MW' }, { name: '调度无功功率', value: '44', unit: 'MVar' },] },
      { title: '光热电站', value: '321.2', list: [{ name: '实时有功功率', value: '44', unit: 'MW' }, { name: '实时无功功率', value: '44', unit: 'MVar' }, { name: '实时功率因数', value: '55' }, { name: '调度有功功率', value: '44', unit: 'MW' }, { name: '调度无功功率', value: '44', unit: 'MVar' },] },

    ]);
    const dataContainer = reactive({
      loading: false,
      times: ''
    });

    const dataInfo = ref({
      color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#d082f8', '#f08f55', '#ee777a', '#eeeeee', '#339001', '#9a6bea'],
      name: [
        '电网计划有功功率(MW)', '风电场实时有功功率(MW)', '光伏电站实时有功功率(MW)', '光热电站实时有功功率(MW)', '电化学储能电站有功功率(MW)',
      ],
      xData: ['1h', '2h', '3h', '4h', '5h', '6h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '24h',],
      data: []
    })
    const dataInfo1 = ref({
      color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#d082f8', '#f08f55', '#ee777a', '#eeeeee', '#339001', '#9a6bea'],
      name: [
        '电网计划无功功率(MVar)', '风电场实时无功功率(MVar)', '光伏电站实时无功功率(MVar)', '光热电站实时无功功率(MVar)', '电化学储能电站无功功率(MVar)',
      ],
      xData: ['1h', '2h', '3h', '4h', '5h', '6h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '24h',],
      data: []
    })
    /** 是否是文档上 */
    function isActive() {
      if (!ViewRef.value) return false;
      return ViewRef.value.getRootNode() === document;
    }
    /**
     * 计算rem
     *  */
    function computeRem() {
      if (!ViewRef.value) return;
      if (!isActive) return;
      let rect = ViewRef.value.getBoundingClientRect();
      let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
      let scale = rect.width / 1920;
      let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
      /**
       * 计算缩放倍数 1920 * 1080
       * 根据设计图自己配置
       *  */
      setRem(fontSize);
    }
    function generateTimeArray() {
      return Array.from({ length: 24 * 60 }, (_, index) => {
        const hour = Math.floor(index / 60);
        const minute = index % 60;
        return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
      });
    }
    onMounted(() => {
      computeRem();
      init()
      // api.getShow1().then(res=>{
      //     this.dataInfo = res.data.data
      //     console.log(res)
      // })
    });
    function init() {
      const newTime = new Date()
      dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
      api.getShow1({
        code: 'show_1', dat: {
          cod2: 'cv'
        },
      }).then(res => {
        dataInfo.value.xData = generateTimeArray()
        dataInfo1.value.xData = generateTimeArray()
        // dataInfo.value.data
        dataInfo.value.data = res.dat.cv
        dataInfo.value.data = dataInfo.value.data.map((item, index) => {
          if (Array.isArray(item)) {
            item.map((v, i) => {
              return v.toFixed(2)
            })
            return item
          } else {
            return []
          }
        })
        console.log(dataInfo.value.data)
        const list = []
        const list2 = []
        for (let i = 0; i < 10; i++) {
          if (i <= 4) {
            list.push(dataInfo.value.data[i])
          } else {
            list2.push(dataInfo.value.data[i])
          }
        }
        dataInfo.value.data = list
        dataInfo1.value.data = list2

      })
      api.getShow1({
        code: 'show_1', dat: {
          cod2: 'net'
        },
      }).then(res => {
        console.log(res)
        if (res.status == 'ok') {
          topList.value.forEach((item, index) => {
            item.value = res.dat.net[index].toFixed(2)
          })
        }

      })
      api.getShow1({
        code: 'show_1', dat: {
          cod2: 'sta'
        },
      }).then(res => {
        centerList.value[0].list.forEach((v, index) => {
          v.value = res.dat.sta.s1[index].toFixed(2)
        })
        centerList.value[1].list.forEach((v, index) => {
          v.value = res.dat.sta.s2[index].toFixed(2)
        })
        centerList.value[2].list.forEach((v, index) => {
          v.value = res.dat.sta.s3[index].toFixed(2)
        })
        centerList.value[3].list.forEach((v, index) => {
          v.value = res.dat.sta.s4[index].toFixed(2)
        })
      })
      api.getShow1({
        code: 'show_1', dat: {
          cod2: 'prc'
        },
      }).then(res => {
        bottomList.value.forEach((v, index) => {
          v.value = res.dat.prc[index].toFixed(2)
        })
      })
    }
    let timer = setInterval(() => {
      computeRem();
      init()
    }, 60000);
    window.addEventListener('resize', computeRem);
    onBeforeUnmount(() => {
      window.removeEventListener('resize', computeRem);
      window.clearInterval(timer);
    });

    return {
      dataContainer,
      ViewRef,
      topList,
      bottomList,
      centerList,
      dataInfo,
      dataInfo1
    };
  },
});
</script>

<template>
  <el-scrollbar height="100vh">
    <div ref="ViewRef" class="big-screen-view">
      <div class="head">
        <ViewHead title="多能互补一体化调控平台">
          <template #left>
            <div class="yun-img">
              <!-- <img src="@/assets/img-show2/yun.png" alt="">
                            <span class="temp">多云</span> -->
              <span class="numberC">系统级AGC/AVC</span>
              <!-- <span class="cs">&nbsp; ℃</span> -->
            </div>
          </template>
          <template #right>
            <div class="right-box">
              <div class="right-box-item-title">{{ dataContainer.times }}</div>
            </div>
          </template>
        </ViewHead>
      </div>
      <div class="content">
        <div class="top" style="height: 10rem;">
          <div class="title">电网数据</div>
          <div class="lists">
            <div class="items" v-for="(item, index) in topList">
              <p>{{ item.name }}</p>
              <p class="num_p">{{ item.value }} {{ item.unit }}</p>
            </div>
          </div>
        </div>

        <div class="dispivid">
          <div style="width:50%">
            <div class="top_two" style="height: 16rem;">
              <div class="title">有功功率发电曲线</div>
              <brokenline v-if="dataInfo.data.length" :dataInfo="dataInfo"></brokenline>
            </div>
          </div>
          <div style="width:50%">
            <div class="top_two" style="height: 16rem;">
              <div class="title">无功功率发电曲线</div>
              <brokenline v-if="dataInfo1.data.length" :dataInfo="dataInfo1"></brokenline>
            </div>
          </div>
        </div>

        <div class="top_three" style="height: 20rem;">
          <div class="title">电站数据</div>
          <div class="listTwo">
            <div class="item" v-for="(item, index) in centerList" :key="index">
              <div class="title_smos">{{ item.title }}</div>
              <div class="text_div" v-for="(items, indexs) in item.list" :key="indexs">
                <p>{{ items.name }}</p>
                <p class="num_p" style="color: #1dacc8;">{{ items.value }} {{ items.unit }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="top_four" style="height: 10rem;">
          <div class="title">电网数据</div>
          <div class="lists">
            <div class="items" v-for="(item, index) in bottomList" :key="index">
              <p>{{ item.name }}</p>
              <p class="num_p">{{ item.value }}元/MWh</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.big-screen-view {
  /** 保持宽高比 */
  width: 100vw;
  height: calc(100vw / calc(1920 / 1080));
  overflow: hidden;
  background-color: #031045c7;
  display: flex;
  flex-direction: column;
  background-image: url('@/assets/images/bjdazong.png');

  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // background-position: center;
  .dispivid {
    display: flex;
    justify-content: space-between;
  }

  >.head {
    height: 5.688rem;

    .yun-img {
      img {
        width: 2.25rem;
        height: 1.938rem;
      }

      .temp {
        color: #d8d8d8;
        font-size: 0.75rem;
      }

      .numberC {
        font-size: 1.5rem;
      }

      .cs {
        font-size: 1.125rem;
        font-weight: 200;
      }
    }

    .right-box-item-title {
      font-weight: 300;
    }
  }

  >.content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    // height: 0;
    // overflow: hidden;
    // padding-left: 1rem;
    // padding: 0 3.125rem;

    >.top,
    .top_two,
    .top_three,
    .top_four {
      width: 100%;
      height: 10.438rem;
      margin-top: 1.25rem;
      overflow: hidden;

      // flex: 1 1 0;
      // width: 37.500rem;
      >.title {
        color: #fff;
        font-size: 1rem;
        margin-left: 1rem;
        background: url('@/assets/img-show2/smallTitle.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        height: 1.875rem;
        line-height: 1.875rem;
        width: 34rem;
        padding-left: 1rem;
      }

      .lists {
        margin: auto 1rem;
        margin-top: 1.25rem;
        display: flex;
        justify-content: space-between;

        .items {
          width: 14.375rem;
          height: 6.875rem;
          background-image: url('@/assets/images/xiao.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
          border-radius: 0.313rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          p {
            color: #3adeff;
            font-size: 1.4rem;
            // margin-top: 1.250rem;
          }

          .num_p {
            font-size: 1.2rem;
            color: #fff;
            margin-top: 0.625rem;
          }
        }
      }
    }

    .top_two {
      height: 16rem;
    }

    .top_three {
      .listTwo {
        display: flex;
        justify-content: space-between;
        margin: auto 1rem;
        margin-top: 1.25rem;

        .item {
          text-align: center;
          width: 18.75rem;
          background-image: url('@/assets/images/zhong.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;

          .title_smos {
            color: #3adeff;
            padding: 1.25rem 0;
          }

          .text_div {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.25rem;
            color: #fff;
            padding: 0 2.5rem;
          }
        }
      }
    }

    .top_four {
      // margin-top: 9.375rem;
    }
  }
}
</style>
